<nav id="sidebar" class="sidebar" role="navigation">
    <!-- need this .js class to initiate slimscroll -->
    <div class="js-sidebar-content">
        <i class="nav-control sidebar-close fa fa-chevron-circle-left" (click)="toggleSideBar($event)"></i>
        <header class="logo hidden-sm-down">
            <!-- <a href="index.html">Scaffold</a> -->
        </header>
        <!-- main notification links are placed inside of .sidebar-nav -->
        <ul class="sidebar-nav">
            <li [ngClass]=" selectedNav=== 'org'? 'active' : '' ">
                <a [routerLink]="['/organization']" routerLinkActive="active" class="menu-organization" (click)="selectNav('org')">
                    <span class="icon">
                        <i class="fa fa-building-o"></i>
                    </span> Organization
                </a>
            </li>
            <li [ngClass]=" selectedNav=== 'team'? 'active' : '' ">
                <a [routerLink]="['/team']" routerLinkActive="active" class="menu-team" (click)="selectNav('team')">
                    <span class="icon">
                        <i class="fa fa-users"></i>
                    </span> Team
                </a>
            </li>
            <li [ngClass]=" selectedNav=== 'repo'? 'active' : '' ">
                <a [routerLink]="['/repository']" routerLinkActive="active" class="menu-repository" (click)="selectNav('repo')">
                    <span class="icon">
                        <i class="fa fa-database"></i>
                    </span> Repository
                </a>
            </li>
        </ul>
    </div>
</nav>
<nav class="page-controls navbar navbar-default">
    <div class="container-fluid">
        <div class="collapse navbar-collapse">
            <!-- search form! link it to your search server -->
           <!--  <form class="navbar-form pull-xs-left" role="search">
                <div class="form-group">
                    <div class="input-group input-group-no-border">
                        <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                    </span>
                        <input class="form-control" type="text" placeholder="Search Dashboard">
                    </div>
                </div>
            </form> -->
            <ul class="nav navbar-nav pull-right" (click)="$event.preventDefault()">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle dropdown-toggle-notifications" id="notifications-dropdown-toggle" data-toggle="dropdown">
                        <span class="thumb-sm avatar pull-sm-left">
                           <i class="fa fa-user"></i>
                        </span> &nbsp; <strong>{{currentUser}}</strong>&nbsp;&nbsp;
                       <!--  <span class="circle bg-warning fw-bold">
                            13
                        </span>
                        <b class="caret"></b> -->
                    </a>
                    <!-- ready to use notifications dropdown. inspired by smartadmin template.
                     consists of three components:
                     notifications, messages, progress. leave or add what's important for you.
                     uses Sing's ajax-load plugin for async content loading. See #load-notifications-btn -->
                    <!-- <div notifications class="dropdown-menu dropdown-menu-right animated animated-fast fadeInUp"></div> -->
                </li>
                <li class="nav-item dropdown">
                    <a href class="nav-link dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-cog fa-lg"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li><a class="dropdown-item"><i class="fa fa-user"></i> &nbsp; My Account</a></li>
                        <li class="dropdown-divider"></li>
                        <li><a class="dropdown-item"><i class="fa fa-pencil"></i> &nbsp; Reset Password</a></li>
                        <!-- <li><a class="dropdown-item" [routerLink]=" ['/inbox'] ">Inbox &nbsp;&nbsp;<span class="label label-pill bg-danger text-white animated bounceIn">9</span></a></li> -->
                        <li class="dropdown-divider"></li>
                        <li><a class="dropdown-item" [routerLink]=" ['/login'] "><i class="fa fa-sign-out"></i> &nbsp; Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="content-wrap">
    <main class="content" id="main">
        <router-outlet></router-outlet>
    </main>
    <div class="loading hide">
        <img src="assets/images/loading.gif" width="60" height="60">
    </div>
</div>
